<template>
  <div>
    <el-card>
      <!-- 最新mv -->
      <div class="mv-item">
        <div class="new-head">
          <div>
            <button
              class="no-btn font-16 font-bold mtop-10"
              @click="toAllMV('new')"
            >
              最新MV <i class="el-icon-arrow-right"></i>
            </button>
          </div>
          <ul class="cat-list">
            <li v-for="(cat, index) in newCat" :key="index">
              <button
                class="no-btn"
                @click="selectNewCat(index, cat.name)"
                :class="{ isActive: cat.isActive }"
              >
                {{ cat.name }}
              </button>
            </li>
          </ul>
        </div>
        <MvList :list="newList"></MvList>
      </div>
      <!-- 网易云 -->
      <div class="mv-item mtop-20">
        <div>
          <button
            class="no-btn font-16 font-bold mtop-10"
            @click="toAllMV('网易出品')"
          >
            网易出品<i class="el-icon-arrow-right"></i>
          </button>
        </div>
        <MvList :list="netList"></MvList>
      </div>
      <div class="mv-item mtop-20">
        <div class="new-head">
          <div>
            <button
              class="no-btn font-16 font-bold mtop-10"
              @click="toTopMV('new')"
            >
              MV排行榜<i class="el-icon-arrow-right"></i>
            </button>
          </div>
          <ul class="cat-list">
            <li v-for="(cat, index) in topList" :key="index">
              <button
                class="no-btn"
                @click="selectTopCat(index, cat.name)"
                :class="{ isActive: cat.isActive }"
              >
                {{ cat.name }}
              </button>
            </li>
          </ul>
        </div>
        <MvTopList :list="topMvList"></MvTopList>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getNewMv, getNetMv, getTopMvList } from "@/api/request";
import MvList from "@/components/list/MvList.vue";
import MvTopList from "@/components/list/MvTopList.vue"
export default {
  components: {
    MvList,MvTopList
  },
  data() {
    return {
      //最新mv的标签
      newCat: [
        { name: "内地", isActive: true },
        { name: "港台", isActive: false },
        { name: "欧美", isActive: false },
        { name: "日本", isActive: false },
        { name: "韩国", isActive: false },
      ],
      newQueryInfo: {
        area: "内地",
      },
      newList: [],
      netList: [],
      // mv排行分类列表
      topList: [
        { name: "内地", isActive: true },
        { name: "港台", isActive: false },
        { name: "欧美", isActive: false },
        { name: "日本", isActive: false },
        { name: "韩国", isActive: false },
      ],
      // 排行榜检索信息
      topQueryInfo:{
        area:'内地',
        limit : 10,
        offset : 0
      },
      topMvList : [],
    };
  },
  created() {
    this.getNewMv();
    this.getNetMvList();
    this.getTopMv();
  },
  methods: {
    toAllMV(type){
      if(type === 'new'){
        this.$router.push({
          path :'/allmv',
          query:{area : this.newQueryInfo.area}
        })
      } else if (type === '网易出品'){
        this.$router.push({
          path : 'allmv',
          query : {type}
        })
      } else {
        this.$message.error('出错了');
      }
    },
    selectNewCat(index, name) {
      this.newCat.forEach((item) => {
        item.isActive = false;
      });
      this.newCat[index].isActive = true;
      this.newQueryInfo.area = name;
      this.getNewMv();
    },
    async getNewMv() {
      const { data: res } = await getNewMv(this.newQueryInfo.area, 8);
      if (res.code !== 200) return;
      this.newList = res.data;
    },
    async getNetMvList() {
      const { data: res } = await getNetMv(8, 0);
      if (res.code !== 200) return;
      this.netList = res.data;
    },
    toTopMV(){
      this.$router.push({
        path:'/topmv',
        query:{area : this.topQueryInfo.area}
      });
    },
    selectTopCat(index , name){
      this.topList.forEach((item) => {
        item.isActive = false ;
      })
      this.topList[index].isActive = true;
      this.topQueryInfo.area = name;
      this.getTopMv();
    },
    async getTopMv(){
      const {data:res} = await getTopMvList(this.topQueryInfo);
      if(res.code !== 200) return;
      this.topMvList = res.data;
    }
  },
};
</script>

<style lang="less" scoped>
.isActive {
  background-color: #fcebeb;
  color: red;
  border-radius: 15px;
  padding: 0 10px;
}
.new-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cat-list {
    display: flex;
    li {
      width: 60px;
      .no-btn {
        height: 30px;
      }
    }
  }
}
</style>